<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>意见反馈列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-body .laytable-cell-1-0-1 {
            height: 59px !important;
        }
        .layui-table-body .layui-table-cell {
            height: 85px;
            line-height: 85px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div lay-filter="listSearch" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <select name="quick_id" lay-search>
                        <option value="">请选择App</option>
                        {volist name="qas" id="v"}
                        <option value="{$v.id}">{$v.name}</option>
                        {/volist}
                    </select>
                </div>

                <div class="layui-inline">
                    <select name="have_read">
                        <option value="">是否阅读</option>
                        <option value="0">未阅读</option>
                        <option value="1">已阅读</option>
                    </select>
                </div>

                <div class="layui-inline">
                    <input type="text" name="uid" placeholder="用户id" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-list-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-reset">重置</button>
                </div>

            </div>
        </div>

        <div class="layui-card-body">

            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>

            <script type="text/html" id="userTpl">
                <p style="line-height: 30px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">读者ID：{{ d.uid }}</span>
                </p>
            </script>


            <script type="text/html" id="contentTpl">
                {{#  if(d.have_read == 0){ }}
                <span class="layui-badge" id="badge_{{d.id}}">new</span>
                {{#  } }}
                {{d.content}}
            </script>

            <script type="text/html" id="table-useradmin-admin">
                <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="reply">回复</a>
            </script>
        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        //监听搜索
        form.on('submit(LAY-list-front-search)', function(data){
            var field = data.field;

            //执行重载
            table.reload('LAY-list-manage', {
                where: field
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        form.on('submit(LAY-reset)', function(data){
            form.val("listSearch", {
                "channel_id": "0"
            });
            form.render();
            table.reload('LAY-list-manage', {
                where: {"channel_id": "0"}
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        table.render({
            elem: '#LAY-list-manage'
            , url: "{:url('Faq/list_data')}" //模拟接口
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , page: true //开启分页
            , limit: 20
            , cols: [[
                {field: 'id', width: 80, title: '序号'}
                , {field: '', title: '读者',templet: '#userTpl'}
                , {field: 'content', title: '留言内容',templet: '#contentTpl'}
                , {title: '操作', width: 170, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
            ]]
        });

        //监听工具条
        table.on('tool(LAY-list-manage)', function(obj){
            var data = obj.data;
            if(obj.event === 'reply'){
                layer.open({
                    type: 2
                    ,maxmin: true//开启最大化最小化按钮
                    ,title: '反馈序号：' + obj.data.id
                    ,offset: '15px'
                    ,content: "/faq/preview?id="+obj.data.id
                    ,area: ['50%', '80%']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-data-preview-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);
                        submit.trigger('click');
                    }
                    ,success: function(layero, index){
                        $("#badge_"+obj.data.id).css('display','none');
                    }
                })
            }
        });

    });
</script>
</body>
</html>